<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>帖子详情</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<script type="text/javascript" src="<%=basePath%>jquery-easyui-1.3.5/jquery.min.js"></script>
	<script type="text/javascript" src="<%=basePath%>ckeditor/ckeditor.js"></script>
<style type="text/css">
 <!--
 body{
	background-image:url('<%=basePath%>images/background4.jpg');
	background-repeat:no-repeat;
}
 
.hr0{ height:1px;border:none;border-top:1px dashed #0066CC;width:95%;}
.hr1{ height:1px;border:none;border-top:4px solid #F2F2F2;width:100%;}

  /* 定义帖子显示区域样式 */
  .topic_div{
  	max-width:100%;
  	min-height:400px;
  	border:1px solid #F2F2F2;
  	background-color:#ffffff;
  }
  /* 定义帖子的左右部分显示样式 */
 .left_topicinfo{
 	width:20%;
 	float:left;
 	min-height:400px;
 	/*background-color:#F2F2F2;*/
 	background-color:#F2FAFE;
 	border:1px solid #F2F2F2;
 }
  .right_topicinfo{
 	width:79%;
 	min-height:400px;
 	float:right;
 }
 /* 头像div */
 .left_topic_img{
 	width:80%;
 	height:150px;
 	margin:0 auto;
 	line-height:200px;
 }
	/*分页导航*/
	.page_direction{
		width:100%;
		height:30px;
		margin:10px auto;
		text-align:center;
		border:0px solid #A9D9DB;
	}
	 .page_direction a:link {color:#1A506C;text-decoration:none;font-size:12pt;} /* 未访问的链接 */
	 .page_direction a:visited {color:#1A506C;text-decoration:none;font-size:12pt;} /* 已访问的链接 */
	 .page_direction a:hover {color:#1A506C;text-decoration:underline;font-size:12pt;} /* 鼠标移动到链接上 */
	 .page_direction a:active {color: #1A506C;font-size:12pt;} /* 选定的链接 */ 
	 
	 .page_direction_text{
	 	color:green;
	 	font-family:微软雅黑;
	 	size:10pt;
	 }
 -->
</style>
  <script type="text/javascript">
  //快捷到达回复编辑框
  function addComment(){
	  var scroll_offset = $("#reply_comment").offset();
  	  $("body,html").animate({
  	   scrollTop:scroll_offset.top  //让body的scrollTop等于pos的top，就实现了滚动
  	   },0);
    }
  
  function addFavorite(){
		var xmlhttp;
		if (window.XMLHttpRequest)
		  {// code for IE7+, Firefox, Chrome, Opera, Safari
		  xmlhttp=new XMLHttpRequest();
		  }
		else
		  {// code for IE6, IE5
		  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
		  }
		xmlhttp.onreadystatechange=function()
		  {
		  if (xmlhttp.readyState==4 && xmlhttp.status==200)
		    {
		    	document.getElementById("favoriteinfo").innerHTML = '已收藏<img alt=\"已收藏此帖\" src=\"<%=basePath%>images/favorited.png\" width=\"13px\" height=\"13px\"/>';
		    	document.getElementById("showFavoriteNumber").innerHTML= ${topic.favoriteNumber+1};
		    }
		  }
		xmlhttp.open("GET","<%=basePath%>club_addFavoriteTopicAction?topicid=${topic.topicId}",false);
		xmlhttp.send();
	}
  </script>
  </head>
  <body>
 
    <jsp:include page="../head.jsp"></jsp:include>
    
	<div class="rightcase">
	 	   <div style="width:100%;margin:0 auto;background-color:#F7F7F7;"> 
	 	     <div style="width:100%;height:50px;margin:5px 0;line-height:50px;padding-left:10px;">	
				<a href="<%=basePath%>User_LoginAction"><img src="<%=basePath%>images/club_img2.png" width="15px" height="15px"></a>
				<span style="font-size:10pt;font-family:微软雅黑;">>&nbsp;
					<!-- 判断是同龄圈还是医院圈 -->
					<s:if test="doctorinfo.doctorId!=null&&doctorinfo.doctorId!=0">
						<span style="font-size:10pt;font-family:微软雅黑;">
							<a href="<%=basePath%>club_selectHosAction?clubid=${topic.clubCategoryId}&page=${pagebean.currpage}&rows=${pagebean.rows}&docid=${doctorinfo.doctorId}" style="text-decoration:none;">
								<s:property value="club.clubName"/>
							</a>
						</span>
						<span style="font-size:10pt;font-family:微软雅黑;">>&nbsp;
							<a href="<%=basePath%>club_selectClubAction?clubid=${topic.clubCategoryId}&orderflag=${pagebean.orderflag}&topicClassifyId=${pagebean.topicClassifyId}&page=${pagebean.currpage}&rows=${pagebean.rows}&docid=${doctorinfo.doctorId}" style="text-decoration:none;">
								<s:property value="doctorinfo.doctorName"/>圈
							</a>
						</span>
					</s:if>
					<s:else>
						<a href="<%=basePath%>club_selectClubAction?clubid=${topic.clubCategoryId}&orderflag=${pagebean.orderflag}&topicClassifyId=${pagebean.topicClassifyId}&page=${pagebean.currpage}&rows=${pagebean.rows}"  style="text-decoration:none;">
							<s:property value="club.clubName"/>同龄圈
						</a>
					</s:else>
					>
					<!-- 判断标题的长度 -->
					<s:if test="topic.topicTitle.length()<65">
						<s:property value="topic.topicTitle"/>
					</s:if>
					<s:else>
					    <s:property value="%{topic.topicTitle.substring(0, 65) + \"...\"}"/>
					</s:else>
				</span>	
		 </div>
		 
		 <div style="width:100%;height:50px;margin:5px 0;line-height:50px;">
			<div style="width:65%;height:100%;float:left;">
				<span style="font-weight:bold;font-size:14pt;font-family:微软雅黑;">
					<!-- 判断标题的长度 -->
					<s:if test="topic.topicTitle.length()<40">
						<s:property value="topic.topicTitle"/>
					</s:if>
					<s:else>
					    <s:property value="%{topic.topicTitle.substring(0, 40) + \"...\"}"/>
					</s:else>  
				</span>
			</div>	
			<!-- <%=basePath%>club_addFavoriteTopicAction?topicid=${topic.topicId} -->
			<div style="width:33%;height:100%;float:right;text-align:right;padding:0 5px;">
				<span style="font-size:10pt;font-family:微软雅黑;">
					<span id="favoriteinfo">
						<!-- 判断是否已收藏此帖 -->
						<s:if test="#request.favoriteflag==false">
							收藏<img id="favoritetopic" alt="收藏帖子" src="<%=basePath%>images/addFavorite.png" onclick="addFavorite()" width="13px" height="13px" style="cursor:pointer;"/>
						</s:if>
						<s:else>
							已收藏<img alt="已收藏此帖" src="<%=basePath%>images/favorited.png" width="13px" height="13px"/>
						</s:else>
					</span>
					收藏：<span id="showFavoriteNumber"><s:property value='topic.favoriteNumber'/></span>
					浏览：<s:property value="topic.scanNumber"/>
					回复：<s:property value="topic.commentNumber"/> 
				</span>
			</div>	
							
		 </div>
		 
 	   	  <div style="min-height:400px;width:100%;border:0px solid red;">
 	   	  		<!-- 判断是否是第一页，如果不是就不显示原帖 -->
				<s:if test="pagebean.currpage==1">
 	   	  		<!-- 原帖 -->
				<div class="topic_div">
					<!-- 左侧信息栏 -->
					<div id="left_div" class="left_topicinfo">
						<div class="left_topic_img">
							<img alt="头像" "width="150px" height="150px" src="<%=basePath%>images/user_img.png">
						</div>
						<div style="width:100%;height:30px;text-align:center;">
								<s:property value="topicuser.userName"/>
						</div>
						<div style="width:80%;height:200px;margin:0 auto;padding:5px 0;">
								已在孕期<span style="color:red;">周天</span><br/>
								来自：<s:property value="topicuser.province"/><s:property value="topicuser.city"/><br/>				
						</div>
					</div>
					<!-- 右侧帖子内容详情 -->
					<div id="right_div" class="right_topicinfo">
						<div style="width:100%;height:30px;line-height:30px;">
							<div style="width:60%;height:100%;float:left;">
								<span style="font-size:10pt;font-family:微软雅黑;">发表于<s:property value="topic.topicCreatedTime"/></span>
							</div>
							<div style="width:38%;height:100%;float:right;text-align:right;padding-right:10px;">
								<span style="font-size:10pt;font-family:微软雅黑;">楼主</span>
								<span style="font-size:10pt;font-family:微软雅黑;color:green;cursor: pointer;" onclick="addComment()">回复</span>
							</div>
						</div>
						<!-- 判断有无图片 -->
						<s:if test="topic.topicImageUrl!=null">
						<div style="max-width:100%;overflow:hidden;min-height:50px;">
							<s:property value="topic.topicContent" escape="false"/>
						</div>
						<div style="max-width:100%;overflow:hidden;height:auto;">
								<img src="${topic.topicImageUrl}" width="auto" height="auto"/>
						</div>	
						</s:if>		
						<s:else>
							<div style="max-width:100%;overflow:hidden;min-height:300px;">
							<s:property value="topic.topicContent" escape="false"/>
						</div>
						</s:else>			
						<div style="margin-bottom:10px;">
							<hr class="hr0" />
						</div>					
						<div style="width:100%;padding-left:20px;min-height:50px;max-height:100px;float:bottom;">
							<s:property value="userdata.signature" escape="false"/>
						</div>
					</div>
					 <div style="clear:both;display:block"></div>
				</div>
				</s:if>
				
				<!-- 跟帖 -->
				<s:iterator id="attr" value="topiccommentlist" status="u">
					<!-- 分割线 -->
					<div style="width:100%;margin-top:1px;">
							<hr class="hr1" />
					</div>
					
					<!-- 跟帖显示区域 -->
					<div class="topic_div">
						<div id="left_div" class="left_topicinfo">
							<div class="left_topic_img">
								<img alt="头像" "width="150px" height="150px" src="<%=basePath%>images/user_img.png">
							</div>
							<div style="width:100%;height:30px;text-align:center;">
									 <s:property value="commentuserlist[#u.index].userName"/>
							</div>
							<div style="width:80%;height:200px;margin:0 auto;padding:5px 0;">
								已在孕期<span style="color:red;">2</span>周<br/>
								来自：<s:property value="commentuserdatalist[#u.index].province"/><s:property value="commentuserdatalist[#u.index].city"/>
							</div>
						</div>
						<div id="right_div" class="right_topicinfo">
							<div style="width:100%;height:30px;line-height:30px;">
								<div style="width:60%;height:100%;float:left;">
									<span style="font-size:10pt;font-family:微软雅黑;">发表于<s:property value="#attr.commentTime"/></span>
								</div>
								<div style="width:38%;height:100%;float:right;text-align:right;padding-right:10px;">
									<span style="font-size:10pt;font-family:微软雅黑;"><s:property value="#attr.floorNum"/>楼</span>
									<form action="<%=basePath%>club_initTopicCommentReplyAction" method="post">
										<!-- 保存当前的页码和每页显示大小设置 -->
										<input type="hidden" name="pagebean.currpage" value="<s:property value='pagebean.currpage'/>">
										<input type="hidden" name="pagebean.rows" value="<s:property value='pagebean.rows'/>">
										<!-- 分类信息和排序信息 -->
										<input type="hidden" name="pagebean.topicClassifyId" value="<s:property value='pagebean.topicClassifyId'/>">
										<input type="hidden" name="pagebean.orderflag" value="<s:property value='pagebean.orderflag'/>">
										<!-- 圈子信息 -->
										<input type="hidden" name="club.clubCategoryId" value="<s:property value='club.clubCategoryId'/>"/>
										<input type="hidden" name="club.clubName" value="<s:property value='club.clubName'/>"/>
										<!-- 原帖信息 -->
										<input type="hidden" name="topic.topicId" value="<s:property value='topic.topicId'/>"/>
										<input type="hidden" name="topic.topicTitle" value="<s:property value='topic.topicTitle'/>"/>
										<!-- 跟帖信息 -->
										 <input type="hidden" name="topiccomment.originalCommentorName" value="<s:property value='commentuserlist[#u.index].userName'/>"/>
										 <input type="hidden" name="topiccomment.originalReplyTime" value="<s:property value='#attr.commentTime'/>"/>
										 <input type="hidden" name="topiccomment.originalCommentText" value="<s:property value='#attr.commentText'/>"/>
										<input type="submit" value="回复" style="border:0;cursor: pointer;"/>
										 <!-- 若为医院圈 -->
										<s:if test="doctorinfo.doctorId!=null&&doctorinfo.doctorId>0">
											<input type="hidden" name="doctorinfo.doctorId" value="<s:property value='doctorinfo.doctorId'/>">
										</s:if>
									</form>
								</div>
							</div>
							<!-- 判断是否是回复跟帖的，如果是将显示回复的对象 -->
							<s:if test="#attr.isReplyComment==1">
								<div style="max-width:100%;height:auto;margin:20px;background-color:#F2FFFE;color:#ACACAC">
									回复<s:property value="#attr.originalCommentorName"/>发表于<s:property value="#attr.originalReplyTime"/>的
									<div style="color:#000000;font-family:微软雅黑;font-size:9pt;">
										<!-- 判断标题的长度 -->
										<s:if test="topic.topicTitle.length()<20">
											<s:property value="#attr.originalCommentText" escape='fasle'/>
										</s:if>
										<s:else>
										    <s:property value="%{#attr.originalCommentText.substring(0, 20) + \"...\"}"/>
										</s:else>
									</div>
								</div>
							</s:if>
							
							<div style="max-width:100%;overflow:hidden;min-height:300px;">
								<s:property value="#attr.commentText" escape="false"/>
							</div>						
							<div>
								<hr class="hr0"/>
							</div>					
							<div style="width:100%;min-height:30px;padding-left:20px;max-height:100px;float:bottom;">
							<s:property value="commentuserdatalist[#u.index].signature"/>
							</div>
						</div>
						<div style="clear:both;display:block"></div>	
				</div>
				</s:iterator>
				<!-- 此段JS意在使左右两个div高度保持一致 -->
				<script type="text/javascript">
					var a=document.getElementById("left_div");
					var b=document.getElementById("right_div");
					if (a.scrollHeight<b.scrollHeight)     //很多网友在这里写成了a.style.height，经测试不行。
					{
					 a.style.height=b.scrollHeight+"px";  //我在实际操作中因为左边有最小高度，所以此处设定成了固定值。
					}
					else
					{
					 b.style.height=a.scrollHeight+"px";  
					}
				</script>
				<!-- 实现分页及跳转页面功能JS -->
				<script type="text/javascript">
					function jumpPage(){
						var input_page=document.getElementById("input_page").value;
						var hidden_totalpage=document.getElementById("hidden_totalpage").value;
						var pattern=/^[0-9]*[1-9][0-9]*$/;
						var flag = pattern.test(input_page);
						if(flag){
							if(input_page>0&&input_page<=hidden_totalpage){
								window.location.href="<%=basePath%>club_topicCommentPageClassifyAction?topicid=${topic.topicId}&rows=${pagebean.rows}&page="+input_page;
							}
							else{
								document.getElementById("validateMsg").innerHTML="请选择正确的页码！";
								document.getElementById("validateMsg").style.color="red";
							}
						}
						else{
							document.getElementById("validateMsg").innerHTML="请选择正确的页码！";
							document.getElementById("validateMsg").style.color="red";
						}
					}
					
					function check_select_pagesize(){
						var select_pagesize=document.getElementById("select_pagesize").value;
						window.location.href="<%=basePath%>club_topicCommentPageClassifyAction?topicid=${topic.topicId}&page=1&rows="+select_pagesize;
					}
				</script>
				<!-- 翻页导航 -->
				<div class="page_direction">
					<input type="hidden" id="hidden_totalpage" value="${pagebean.totalpage}">
					<!-- 设置每页显示的条数 -->
					每页显示
					<select id="select_pagesize" onchange=check_select_pagesize(this.value)>
						<option value="10"
						    <s:if test="pagebean.rows==10">selected</s:if>>10
						</option>
						<option value="15"
						    <s:if test="pagebean.rows==15">selected</s:if>>15
						</option>
						<option value="20"
						    <s:if test="pagebean.rows==20">selected</s:if>>20
						</option>
						<option value="30"
						    <s:if test="pagebean.rows==30">selected</s:if>>30
						</option>
					</select>条
					<!-- 判断是否是第一页，如果是就不显示上一页按钮 -->
					<s:if test="pagebean.currpage!=1">
						<a href="<%=basePath%>club_topicCommentPageClassifyAction?topicid=${topic.topicId}&page=${pagebean.currpage-1}&rows=${pagebean.rows}"><span class="page_direction_text">上一页</span></a>
					</s:if>
					<!-- 判断是否是最后一页，如果是就不显示下一页按钮 -->
					<s:if test="pagebean.currpage<pagebean.totalpage">
						<a href="<%=basePath%>club_topicCommentPageClassifyAction?topicid=${topic.topicId}&page=${pagebean.currpage+1}&rows=${pagebean.rows}"><span class="page_direction_text">下一页</span></a>
					</s:if>
					<!-- 如果页数大于1，提供跳转 -->
					<s:if test="pagebean.totalpage>1">
							跳转到<input type="text" id="input_page" size="2" value="1"/>页
							<input type="button" value="跳转" onclick="jumpPage();">
					</s:if>
					当前第<span class="page_direction_text">${pagebean.currpage}</span>页，
					共<span class="page_direction_text">
					<s:if test="pagebean.totalpage<1">
							1
					</s:if>
					<s:else>
						${pagebean.totalpage}
					</s:else>
					</span>页
					<span id="validateMsg"></span>
				</div>
				
				<!-- 评论 -->
				<div  id="reply_comment" style="width:100%;height:230px;background-color:#FAFAFA">
					<form action="club_addTopicCommentAction" method="post">
						 <!-- 保存当前的页码和每页显示大小设置 -->
						 <input type="hidden" name="pagebean.currpage" value="<s:property value='pagebean.currpage'/>">
						  <input type="hidden" name="pagebean.rows" value="<s:property value='pagebean.rows'/>">
						 <!-- 隐藏表单域 -->
		 	   			 <input type="text" name="topiccomment.originalTopicId" value="<s:property value='topic.topicId'/>" style="border:0;display:none"/>
		 	   			 <input type="text" name="topiccomment.commentAuthorId" value="<s:property value='#session.temploginbean.userId'/>" style="border:0;display:none"/>
						 <!-- 隐藏回复跟帖的信息 -->
						 <input type="hidden" name="topiccomment.isReplyComment" value="0"/>
						 <input type="hidden" name="topiccomment.originalCommentId" value="0"/>
						 
						<!-- 若为医院圈 -->
						<s:if test="doctorinfo.doctorId!=null&&doctorinfo.doctorId>0">
							<input type="hidden" name="doctorinfo.doctorId" value="<s:property value='doctorinfo.doctorId'/>">
						</s:if>
						 
	 				<div style="width:20%;height:200px;float:left;background-color:#ffffff;">
	 					<div class="page_direction_text" style="text-align:right;">
	 						回复：
	 					</div>
	 					<div style="width:100px;height:100px;margin:30px auto;border:1px solid green;text-align:center;line-height:100px;">
	 						<img alt="头像" width="100px" height="100px" src="<%=basePath%>images/user_img.png">
	 					</div>
	 				</div>
	 				<div style="width:80%;height:auto;float:right;">
	 					<textarea id="topiccomment_content" name="topiccomment.commentText" style="width:700px;height:180px"></textarea>
						 <%-- <textarea id="editcomment" name="topiccomment.commentText" class="ckeditor"></textarea>
						 <script type="text/javascript">
						 	CKEDITOR.replace('topiccomment.commentText',{
						 			toolbar : 'Full',
						 	        uiColor : '#FAFAFA',
						 	       	autoGrow_maxHeight:'350px',
						 	       	resize_enabled : false,
						 			//'topiccomment.commentText',{customConfig : '/ckeditor/customer_config.js'} 
						 	});
						 </script> --%>
						 
						 <div style="width:100%;heigh:55px;">
						 	<div style="width:30%;heigh:100%;float:left;">
					 			<input type="submit" value="发表评论" onclick="return CkeckCommentForm();" style="cursor: pointer;width:200px;height:45px;"/>
					 		</div>
					 		<div style="width:68%;height:55px;float:right;text-align:left;line-height:45px">
								<span id="erromsg"></span>
							</div>
						 </div>
						 
					 </div>
					 </form>
				</div>
			 </div>
		  </div>
		
		</div>
    <%@ include file="../foot.jsp"%>
  </div>
  
<script type="text/javascript">
  	function CkeckCommentForm(){
  		//var oEditor = CKEDITOR.instances.editcomment;
  		var topiccomment=document.getElementById("topiccomment_content").value;
  		
  		/* if(oEditor.getData()==""){
  			document.getElementById("erromsg").innerHTML="至少写点什么吧！";
  			document.getElementById("erromsg").style.color="red";
  			return false;
  		} */
  		if(topiccomment==""){
  			document.getElementById("erromsg").innerHTML="至少写点什么吧！";
  			document.getElementById("erromsg").style.color="red";
  			return false;
  		}
  		else{
  			return true;
  		}
  	}
</script>
  </body>
</html>
